Proposal by Allan Avendano for CSS Template System

Proposed by Allan Avendano (profile, biography) Don't forget to submit this proposal to official Google Melange site too!


How will I do that project

  • Mainly, during the development I will focus into the following objectives:
  • Improve and to continue with the development with an existing CSS framework in Smalltalk, called Phantasia. Through a set of rich object model of CSS elements, beyond specification limits. This set will be suitable to edition through Smalltalk code.
  • Provide an interface in order to interact with the objects available on the framework. This interface will provide an easy-to-interact way with the object, such as drag and drop, pull and edit-on-place.
  • Guarantee minimal knowledge of CSS syntax to developers by using Phantasia. The system will provide a way to download or/and copy code generated so far.
  • Ensure portability among existing web frameworks, such as Seaside, Aida and Iliad, and future web frameworks developed on Smalltalk.

I think is essential that I define some general project’ lineaments, before starting coding:

  • Code generation pattern to be used during the development phase.
  • The set of objects to include into the framework.
  • Test case units to apply into the backend and frontend.
  • Features of the Web UI.

What methodologies will I use

Due to the tight schedule, I think the most suitable methodology to apply is based on spiral methodology, but initially I will define the general objectives, testing phase and coding approach.During each development phase, I will define the specific objectives to cover into the following milestone. On this sense, I think that on this way, we can provide a usable CSS framework.That’s why; I am planning some milestones during the development phase. In the section below, I describe the suggested deliverables and deadline dates for each of them.

Suggested timeline and milestones

During the period of Community bonding period, from 23rdApril to 20th May, I will examine in deep the existing codebase of Phantasia. Also, I will discuss my general ideas about the implementation phase, and based on it, I will start defining the architecture and diagram class of the framework.

In the following schedule, I estimate four milestones to deliver. Two related with general documentation and two with coding:

  • General architecture of Phantasia and Class Diagram. I consider these as road maps during the development phase.
    Estimated deadline: 27th May.
  • User Interface (Webapplication).
    Version 1. Basic design based on suggested approaches for interacting with template objects.
    Estimated deadline: 8thJuly.
    Version 2. Revised version according to mentor and community feedback.
    Estimated deadline: 29thJuly.
  • Documentation generated from the code generated.
    Estimated deadline: 1stJuly.
    Estimated deadline:20thAugust.
  • ObjectTemplates.These are the objects discussed during planning phase at the beginning.
    ObjectTemplate1. Estimated deadline: 14thJune.
    ObjectTemplate2. Estimated deadline: 13thJuly.
    ObjectTemplate3. Estimated deadline: 29thJuly.

At the end of July, I am planning to start with final integration tests, additional enhancements will be incorporated and cleaning up entire code.

Where I see the risks

I think that the main risk is to not fulfill on time the planned schedule, that’s why I am getting feedback from the mentor since “call for students” started, and to start planning and coding during Community Bonding period. Nevertheless, my intention is to continue working with Smalltalk community after GSOC, by integrating more functionality that is not part of this proposal, for example: provide support for mobile devices, CSS3 and HTML5.

How the results will look like

The following snapshots are the basic ideas discussed with mentor so far, that can be used as a basic scratch for the web application.

Image taken from PageBlox 

 

Another approach to template objects visualization may be based on ExtJs modeling.

 


http://www.sencha.com/products/extjs/examples/ 




Updated: 9.4.2012